<template>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="ruleForm.permissionName" />
      </el-form-item>
      <el-form-item label="父级id" prop="name">
        <el-select v-model="ruleForm.parentId" placeholder="请选择父级id">
        <el-option v-for="item in tableData" :label="item.permissionName" :value="item.permissionId" />
      </el-select>
      </el-form-item>
      <el-form-item label="路由path" prop="name">
        <el-input v-model="ruleForm.routePath" />
      </el-form-item>
      <el-form-item label="路由name" prop="name">
        <el-input v-model="ruleForm.routeName" />
      </el-form-item>
      <el-form-item label="路由view" prop="name">
        <el-input v-model="ruleForm.routeView" />
      </el-form-item>
    
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          Create
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref,onMounted } from 'vue'
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
  import { ElMessage } from 'element-plus'
  import axios from 'axios'
  import { useGoodStore } from '@/stores/counter'
  const useStore=useGoodStore();
  
  interface RuleForm {
    permissionId: number,
    permissionName: string,
  parentId: number,
  routePath: string,
  routeName: string,
  routeView: string
  }
  
  const formSize = ref<ComponentSize>('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = ref<RuleForm>({
    permissionId: 0,
    permissionName: "",
  parentId: 0,
  routePath: "",
  routeName: "",
  routeView: ""
  })
  
  const rules = reactive<FormRules<RuleForm>>({})
  
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        ruleForm.value.permissionId=useStore.pid;
       axios.put('/api/User/PermissionUp',ruleForm.value)
       .then(res=>{
        if(res.data.isSuc)
        {
            ElMessage.success(res.data.msg);
        }
        else
        {
            ElMessage.error(res.data.msg);
        }
       })
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }

  interface Permission {
    permissionId: number,
    permissionName: string,
  parentId: number,
  routePath: string,
  routeName: string,
  routeView: string,
  state: true
  }
  const tableData = ref<Permission[]>([])
  onMounted(()=>{
  loadPermission();
  loadData();
  })
  const loadPermission=()=>{
    axios.get('/api/User/GetPermission')
    .then(res=>{
      if(res.data.isSuc)
      {
        tableData.value=res.data.data;
      }
    })
  }
  const loadData=()=>{
    axios.get('/api/User/PermissionBack',{
        params:{
            pid:useStore.pid
        }
    })
    .then(res=>{
        ruleForm.value=res.data.data;
    })
  }
  </script>
  